<template>
  <div id="pickGoodsDetails">
    <x-header :left-options="{backText: ''}" class="vux-1px-b">商品详情</x-header>
    <div class="slideshow">
      <div class="slideshow_img">
        <img src="" alt="">
      </div>
      <p>标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
      <div class="slideshow_info">
        <span>兑换比例 1:3</span>
        <b>可使用单数<i>: 5单</i></b>
        <b>库存: 399</b>
      </div>
    </div>
    <div class="pick_list">
      <ul>
        <li v-for="(item, index) in 10" :key="index" @click="$router.push({path: '/pickGoodsDetails'})">
          <div class="pick_list_img"><img src="" alt=""></div>
          <div class="pick_list_bottom">
            <div>思考地方撒地方两三点思考地方撒方两三点思地方撒地两三点思地方撒地方点思考地地方两三点</div>
            <span>兑换比例<i>1:3</i></span>
          </div>
        </li>
      </ul>
    </div>
    <div class="edit_btn">
      <button class="def_btn" @click="$router.push('/exchangeList')">立刻兑换</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pickGoodsDetails'
}
</script>

<style lang="less" scoped="scoped">
#pickGoodsDetails{
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  .slideshow{
    background: #ffffff;
    margin-bottom: .2rem;
    .slideshow_img{
      width: 100%;
      height: 4.1125rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
    p{
      font-size: .275rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: rgba(0,0,0,1);
      line-height: .4375rem;
      padding: .2rem .4rem;
      padding-bottom: 0;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .slideshow_info{
      padding: .2rem .4rem;
      span{
        font-size: .3rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: rgba(255,0,54,1);
        line-height: .4375rem;
      }
      b{
        font-size: .3rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: rgba(0,0,0,1);
        line-height: .4375rem;
        padding-left: .8rem;
      }
      i{font-size: .3rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        line-height: .4375rem;
        color: #FFCC00;
      }
    }
  }
  .pick_list{
    ul{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width: 49%;
        background:rgba(255,255,255,1);
        padding: .3rem;
        margin-bottom: .2rem;
        div.pick_list_img{
          text-align: center;
          padding-bottom: .3rem;
          img{
            width: 2.375rem;
            height: 2.375rem;
          }
        }
        div.pick_list_bottom{
          div{
            font-size: .225rem;
            font-family: 'Source Han Sans SC';
            font-weight: 400;
            color: rgba(51,51,51,1);
            line-height: .4375rem;
            padding-bottom: .3rem;
            overflow: hidden;
            display: -webkit-box;
            -webki-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          span{
            font-size: .225rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(0,0,0,1);
            line-height: .4375rem;
            i{
              color: #FF0036;
              padding-left: .2rem;
            }
          }
        }
      }
    }
  }
  .edit_btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    .def_btn{
      width: 100%;
      height: 1.25rem;
      background: rgba(255,204,0,1);
      border: none;
      font-size: .375rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: rgba(255,255,255,1);
      line-height: .4375rem;
      text-align: center;
    }
  }
}
</style>
